﻿<template>
  <div class="deviceInfo-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <TableSearch :search="tb.tableData.search" @search="onSearch" />
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 8px">
      <Table ref="tableRef" v-bind="tb.tableData" :getData="getData" :exportChangeData="exportChangeData" @sortHeader="onSortHeader" @selectionChange="tableSelection" border="">
        <template #command="">
          <el-button type="primary" icon="ele-Plus" @click="openadddeviceInfo" v-auth="'deviceInfo:add'"> {{ t('message.pageConfiguration.add') }} </el-button>
          <el-button v-if="state.selectlist.length > 0" type="danger" icon="ele-Delete" @click="bacthDelete" v-auth="'deviceInfo:batchDelete'"> {{ t('message.pageConfiguration.batchDel') }} </el-button>
          <el-button type="primary" icon="ele-Download" @click="downTemplete" v-auth="'deviceInfo:upload'"> {{ t('message.pageConfiguration.downloadTemplate') }} </el-button>
          <el-button type="primary" icon="ele-Plus" @click="openUploadDialog" v-auth="'deviceInfo:upload'"> {{ t('message.pageConfiguration.upload') }} </el-button>
        </template>
        <template #action="scope">
          <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openedit(scope.row)" v-auth="'deviceInfo:edit'"> {{ t('message.pageConfiguration.edit') }} </el-button>
          <el-button icon="ele-Delete" size="small" text="" type="danger" @click="delConfig(scope.row)" v-auth="'deviceInfo:delete'"> {{ t('message.pageConfiguration.del') }} </el-button>
        </template>
      </Table>
    </el-card>

    <editDialog ref="editDialogRef" :title="state.editdeviceInfoTitle" :groupList="state.groupList" @updateData="updateData" />
    <uploaddialog ref="uploaddialogRef" :import-data="importData" />
  </div>
</template>

<script lang="ts" setup="" name="deviceInfo">
  import { onMounted, onUnmounted, reactive, ref, defineAsyncComponent, nextTick,watch } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import mittBus from '/@/utils/mitt';
  import editDialog from '/@/views/main/deviceInfo/component/editDialog.vue'
  import { getDictDataItem as di, getDictDataListToSelect as dl } from '/@/utils/dict-utils';
  import { pageDeviceInfo, deleteDeviceInfo,batchDeleteDeviceInfo,importDeviceInfo ,downLoadDeviceInfo  } from '/@/api/main/deviceInfo';
  import { getAPI } from '/@/utils/axios-utils';
  import { SysEnumApi } from '/@/api-services/api';
  import commonFunction from '/@/utils/commonFunction';
  import { auth } from '/@/utils/authFunction'
  import { useI18n } from 'vue-i18n';
  const { t ,locale} = useI18n();
  const { downFile}=commonFunction();
  // 引入组件
  const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
  const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));

  const uploaddialog = defineAsyncComponent(() => import('/@/components/table/uploaddialog.vue'));

  const uploaddialogRef = ref();
  const loading=ref();

        // 页面加载时
        onMounted(async () => {
        });
        const tableRef = ref<RefType>();
    const editDialogRef = ref();
    const state = reactive({
    editdeviceInfoTitle: '',
    selectlist: [] as EmptyObjectType[],
    groupList: [] as Array<String>,
      });

      const tb = reactive<TableDemoState>
        ({
        tableData: {

        // 表头内容（必传，注意格式）
        columns: [
        { prop: 'deviceCode', width: 130, label:  t('message.deviceInfo.deviceCode'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'deviceName', width: 130, label:  t('message.deviceInfo.deviceName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'deviceDesc', width: 130, label:  t('message.deviceInfo.deviceDesc'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'unitPrice', width: 130, label:  t('message.deviceInfo.unitPrice'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'attribute1', width: 130, label:  t('message.deviceInfo.attribute1'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'attribute2', width: 130, label:  t('message.deviceInfo.attribute2'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'attribute3', width: 130, label:  t('message.deviceInfo.attribute3'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'attribute4', width: 130, label:  t('message.deviceInfo.attribute4'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'attribute5', width: 130, label:  t('message.deviceInfo.attribute5'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'createUserName', width: 130, label:  t('message.deviceInfo.createUserName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'updateUserName', width: 130, label:  t('message.deviceInfo.updateUserName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'action', width: 140, label: t('message.pageConfiguration.operate'), type: 'action', align: 'center', isCheck: true, fixed: 'right', hideCheck: true },
        ],
        // 配置项（必传）
        config: {
        isStripe: true, // 是否显示表格斑马纹
        isBorder: false, // 是否显示表格边框
        isSerialNo: false, // 是否显示表格序号
        isSelection: true, // 是否勾选表格多选
        showSelection: auth('deviceInfo:batchDelete'), //是否显示表格多选
        pageSize: 20, // 每页条数
        hideExport: false, //是否隐藏导出按钮
        exportFileName: 'deviceInfo', //导出报表的文件名，不填写取应用名称
        },
        // 搜索表单，动态生成（传空数组时，将不显示搜索，type有3种类型：input,date,select）
        search: [
         {label:  t('message.deviceInfo.deviceCode'), prop: 'deviceCode', placeholder: t('message.deviceInfo.deviceCode'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.deviceName'), prop: 'deviceName', placeholder: t('message.deviceInfo.deviceName'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.deviceDesc'), prop: 'deviceDesc', placeholder: t('message.deviceInfo.deviceDesc'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.unitPrice'), prop: 'unitPrice', placeholder: t('message.deviceInfo.unitPrice'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.attribute1'), prop: 'attribute1', placeholder: t('message.deviceInfo.attribute1'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.attribute2'), prop: 'attribute2', placeholder: t('message.deviceInfo.attribute2'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.attribute3'), prop: 'attribute3', placeholder: t('message.deviceInfo.attribute3'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.attribute4'), prop: 'attribute4', placeholder: t('message.deviceInfo.attribute4'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.attribute5'), prop: 'attribute5', placeholder: t('message.deviceInfo.attribute5'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.createUserName'), prop: 'createUserName', placeholder: t('message.deviceInfo.createUserName'), required: false, type: 'input' },
         {label:  t('message.deviceInfo.updateUserName'), prop: 'updateUserName', placeholder: t('message.deviceInfo.updateUserName'), required: false, type: 'input' },
        ],
        param: {},
        defaultSort: {
        prop: 'createTime',
        order: 'ascending',
        },
        },
        });
        // 监听语言切换
        watch(locale, async () => {
        // 更新表头和搜索表单的国际化文本
        tb.tableData.columns.forEach(column => {
        switch (column.prop) {
        case 'id':
        column.label = t('message.deviceInfo.id');
        break;
        case 'deviceCode':
        column.label = t('message.deviceInfo.deviceCode');
        break;
        case 'deviceName':
        column.label = t('message.deviceInfo.deviceName');
        break;
        case 'deviceDesc':
        column.label = t('message.deviceInfo.deviceDesc');
        break;
        case 'unitPrice':
        column.label = t('message.deviceInfo.unitPrice');
        break;
        case 'attribute1':
        column.label = t('message.deviceInfo.attribute1');
        break;
        case 'attribute2':
        column.label = t('message.deviceInfo.attribute2');
        break;
        case 'attribute3':
        column.label = t('message.deviceInfo.attribute3');
        break;
        case 'attribute4':
        column.label = t('message.deviceInfo.attribute4');
        break;
        case 'attribute5':
        column.label = t('message.deviceInfo.attribute5');
        break;
        case 'createUserName':
        column.label = t('message.deviceInfo.createUserName');
        break;
        case 'updateUserName':
        column.label = t('message.deviceInfo.updateUserName');
        break;
        case 'action':
        column.label=t('message.pageConfiguration.operate');
        break;
        }
        });

        // 更新搜索表单的国际化文本
        tb.tableData.search.forEach(searchItem => {
        switch (searchItem.prop) {
        case 'id':
        searchItem.label = t('message.deviceInfo.id');
        searchItem.placeholder = t('message.deviceInfo.id');
        break;
        case 'deviceCode':
        searchItem.label = t('message.deviceInfo.deviceCode');
        searchItem.placeholder = t('message.deviceInfo.deviceCode');
        break;
        case 'deviceName':
        searchItem.label = t('message.deviceInfo.deviceName');
        searchItem.placeholder = t('message.deviceInfo.deviceName');
        break;
        case 'deviceDesc':
        searchItem.label = t('message.deviceInfo.deviceDesc');
        searchItem.placeholder = t('message.deviceInfo.deviceDesc');
        break;
        case 'unitPrice':
        searchItem.label = t('message.deviceInfo.unitPrice');
        searchItem.placeholder = t('message.deviceInfo.unitPrice');
        break;
        case 'attribute1':
        searchItem.label = t('message.deviceInfo.attribute1');
        searchItem.placeholder = t('message.deviceInfo.attribute1');
        break;
        case 'attribute2':
        searchItem.label = t('message.deviceInfo.attribute2');
        searchItem.placeholder = t('message.deviceInfo.attribute2');
        break;
        case 'attribute3':
        searchItem.label = t('message.deviceInfo.attribute3');
        searchItem.placeholder = t('message.deviceInfo.attribute3');
        break;
        case 'attribute4':
        searchItem.label = t('message.deviceInfo.attribute4');
        searchItem.placeholder = t('message.deviceInfo.attribute4');
        break;
        case 'attribute5':
        searchItem.label = t('message.deviceInfo.attribute5');
        searchItem.placeholder = t('message.deviceInfo.attribute5');
        break;
        case 'createUserName':
        searchItem.label = t('message.deviceInfo.createUserName');
        searchItem.placeholder = t('message.deviceInfo.createUserName');
        break;
        case 'updateUserName':
        searchItem.label = t('message.deviceInfo.updateUserName');
        searchItem.placeholder = t('message.deviceInfo.updateUserName');
        break;
        }
        });

        // 等待下一次 DOM 更新循环完成后再进行表格刷新
        await nextTick();
        tableRef.value?.handleList(); // 刷新表格数据
        });
        const getData = async(param: any) => {

        loading.value = true;
        var res = await  pageDeviceInfo(Object.assign(param));

        loading.value = false;
        return  res.data;
        };
        const exportChangeData = (data: Array<EmptyObjectType>
          ) => {
          data.forEach((item) => {
          item.sysFlag = item.sysFlag == 1 ? t('message.deviceInfo.yes') : t('message.deviceInfo.no');
          });
          return  data;
          };
          // 拖动显示列排序回调
          const onSortHeader = (data: object[]) => {
          tb.tableData.columns = data;
          };
          // 搜索点击时表单回调
          const onSearch = (data: EmptyObjectType) => {
          tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
          nextTick(() => {
          tableRef.value.pageReset();
          });
          };

          const getGroupList = async () => {

          };

          //表格多选事件
          const tableSelection = (data: EmptyObjectType[]) => {
          // console.log('表格多选事件', data)
          state.selectlist = data;
          };

          onMounted(async () => {
          getGroupList();
          });

          // 更新数据
          const updateData = () => {
          tableRef.value.handleList();
          getGroupList();
          };

          // 打开新增页面
          const openadddeviceInfo = () => {
          state.editdeviceInfoTitle = t('message.deviceInfo.adddeviceInfo');
          editDialogRef.value?.openDialog({});
          };

          // 打开编辑页面
          const openedit = (row: any) => {
          state.editdeviceInfoTitle = t('message.deviceInfo.editdeviceInfo');
          editDialogRef.value?.openDialog(row);
          };

          // 删除
          const delConfig = (row: any) => {
          ElMessageBox.confirm(t('message.messages.confirmDel')+`：【${row[tb.tableData.columns[1].prop.toString()]}】?`, t('message.messages.hint'), {
          confirmButtonText: t('message.messages.confirm'),
          cancelButtonText: t('message.messages.cancel'),
          type: 'warning',
          })
          .then(async () => {
          await deleteDeviceInfo({ id: row.id });
          tableRef.value.handleList();
          ElMessage.success(t('message.messages.deleteSuccess'));
          })
          .catch(() => {});
          };

          //批量删除
          const bacthDelete = () => {
          if (state.selectlist.length == 0) return  false;
          ElMessageBox.confirm(t('message.messages.confirmBatchDel')+`【${state.selectlist[0].name}】${state.selectlist.length}`+t('message.messages.con'),  t('message.messages.hint'), {
          confirmButtonText: t('message.messages.confirm'),
          cancelButtonText: t('message.messages.cancel'),
          type: 'warning',
          })
          .then(async () => {
          const ids = state.selectlist.map((item) => {
          return  item.id;
          });
          var res = await batchDeleteDeviceInfo(ids);
          tableRef.value.pageReset();
          ElMessage.success(t('message.messages.deleteSuccess'));
          })
          .catch(() => {});



          };
          // 打开上传页面
const openUploadDialog = () => {
  uploaddialogRef.value.openUploadDialog();
};
const importData = async (param: any) => {
  var res = await importDeviceInfo(param);
  return res;
};

const downTemplete =async ()=>{
  var res=await downLoadDeviceInfo();
  downFile(res);
}
</script>
